<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>login</title>
    <script src="/SSM/js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/bootstrap.min.js"></script>
<style type="text/css">
.vertical-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
  </head>
  <body>
    <div class="container vertical-center">
	<div class="col-md-6 col-md-offset-3">
      <form  action="loginvalidate" method="post">
        <h2 >Please login</h2>
        <label for="inputEmail" class="sr-only">userid</label>
        <input type="text" name="username" id="inputEmail" class="form-control" placeholder="userid" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <label for="inputEmail" class="sr-only">userid</label>
        <input type="text" name="pic" id="pic" class="form-control" placeholder="验证码" required>              
                        验证码：<img src="captcha" id="code" width="120" height="40">  
        <button id="sub" class="btn btn-lg btn-primary btn-block" type="button">login</button>
      </form>
        	
	</div>
    </div> <!-- /container -->
  </body>
</html>
<script>
$(document).ready(function(){
   // 更换验证码
   $('#code').click(function() 
   {
       $('#code').attr("src", "captcha?timestamp=" + (new Date()).valueOf());
   }); 
   
   $("#sub").click(function(){
   	 	$.post("loginvalidate",$("form").serialize(),function(a){
   	 		if(a.state=='success')
	    	window.location="showactor.html";
	    	if(a.state=='error code')
	    	alert("error code");
	    	if(a.state=='username is null')
	    	alert("username is null");
	    	if(a.state=='error password')
	    	alert("error password");
	    });
   });
   
});
  </script>